<template>
    <!-- {{$router.options}}  打印测试-->
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo"  active-text-color="#ffd04b"
            background-color="#545c64" text-color="#fff" :router="true">
        <template v-for="(item, index) in $router.options.routes">
        <!-- 一级菜单 -->
        <el-menu-item :index="item.path" v-if="item.children == undefined && item.meta.show== true">
                <component :is="item.meta.icon" class="icon"></component>
               <span>{{ item.meta.title }}</span>
        </el-menu-item>
    
        <!-- 二级菜单 -->
        <el-sub-menu :index="item.path" v-if="item.children != undefined && item.meta.show == true">
            <template #title>
                <component :is="item.meta.icon" class="icon"></component>
                <span>{{ item.meta.title }}</span>
            </template>
            <el-menu-item-group>
                <template v-for="item2 in item.children" >
                <el-menu-item :index="item2.path" v-if="item2.meta.show == true">
                    <component :is="item2.meta.icon" class="icon"></component>
                    <span>{{ item2.meta.title }}</span>
                </el-menu-item>
                </template>
            </el-menu-item-group>
        </el-sub-menu>
        </template>
    </el-menu>
</template>
<script setup lang="ts">

</script>
<style scoped>
.icon {
  width: 16px;
  height: 16px;
  padding-right: 5px;
}
.el-menu--collapse {
    /*屏幕高度的占比 */
    min-height: calc(100vh - 100px);
}
.el-menu-vertical-demo:not(.el-menu--collapse){
    width: 200px;
    min-height: calc(100vh - 66px);

}
</style>